<!DOCTYPE html>
<html lang="zh-CN">
<head>
    {% load staticfiles %}
    {# Load the tag library #}

    {% load bootstrap3 %}
    {# Load CSS and JavaScript #}
{#    {% bootstrap_css %}#}
{#    {% bootstrap_javascript %}#}
    <title>自动化运维系统</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE标准内核，IE兼容内核。  -->
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <link rel="stylesheet" href="{% static 'bootstrap3/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/bootstrap-responsive.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'layer/skin/layer.css' %}"/>
    <!-- <link rel="stylesheet" href="{% static 'layer/skin/seaning/style.css' %}" /> -->
    <link rel="stylesheet" href="{% static 'layer/skin/layer.ext.css' %}"/>
    <!-- <link rel="stylesheet" href="css/fullcalendar.css" /> -->
    <link rel="stylesheet" href="{% static 'css/black/matrix-style.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/black/matrix-media.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/demo.css' %}"/>
    <script src="{% static 'js/jquery-1.9.1.min.js' %}" type="application/javascript"></script>
    <script src="{% static 'bootstrap3/js/bootsrap.min.js' %}"></script>
    <script src="{% static 'bootstrap3/js/ie-emulation-modes-warning.js' %}"></script>
{#    <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>#}


    <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <!-- <link rel="stylesheet" href="css/jquery.gritter.css" /> -->
    <style>
        /*   .btn{margin-top:2%;margin-bottom:2%;} */
    </style>
    <style type="text/css">
        #web_socket {
        {#            background-color:aquamarine;#}{#            position: fixed;#} height: 50%;
            width: 500px;

            right: 0px;
            bottom: 0px;
        }

    </style>
    {% block style %}{% endblock %}
    {% block headjs %}{% endblock %}

</head>
<body>

<!-- 基础的body里放的内容 -->
<div class="div1">
    <div class="div2">
        {% block logo %}
        {% endblock %}
        <!--close-Header-part-->
        {% block header_menu %}
        {% endblock %}


        <!--start-top-search-->
        {#        <div id="search" style="display:none;">#}
        {##}
        {#            <form class="form-inline" action="{% block searchaction %}{% endblock %}"#}
        {#                  method="{% block searchmethod %}get{% endblock %}">#}
        {#                <div class="form-group">#}
        {#                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>#}
        {#                    <div class="input-group">#}
        {#                        <input type="text" class="form-control" name="{% block searchname %}{% endblock %}"#}
        {#                               value="{% block searchvalue %}{{ searchaction }}{% endblock %}"#}
        {#                               placeholder="{% block searchtip %}输入搜索内容...{% endblock %}">#}
        {#                    </div>#}
        {#                </div>#}
        {#                <button type="submit" class="btn btn-primary">搜 索</button>#}
        {#            </form>#}
        {##}
        {##}
        {#        </div>#}
        <!--close-top-search-->


        <span class="hidden" id="flag">{% block flag %}{% endblock %}</span>
    </div>
</div>

<div id="body">
    {% block main %}
        {% bootstrap_messages %}
    {% endblock %}
</div>

<div hidden id="web_socket">
    <table class="table table-hover table-bordered websocket_tab" style="padding: 10px 10px">
        <thead>
        <tr>
            <th>剧本名</th>
            {#            <th>对应的服务器</th>#}
            {#            <th>剧本版本</th>#}
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</div>
{% block footer %}
{% endblock %}
{#<script src="{% static 'js/transition.js' %}"></script>#}
<!-- <script src="js/excanvas.min.js"></script>    -->
<!-- <script src="js/jquery.min.js"></script>  -->
<!-- <script src="js/jquery.ui.custom.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.flot.min.js"></script> 
<script src="js/jquery.flot.resize.min.js"></script> 
<script src="js/jquery.peity.min.js"></script>
<script src="js/fullcalendar.min.js"></script> -->
<!-- <script src="http://cdn.bootcss.com/typeahead.js/0.10.4/typeahead.jquery.js"></script> -->
<script src="{% static 'js/matrix.js' %}"></script>
<!-- <script src="js/matrix.dashboard.js"></script> 
<script src="js/jquery.gritter.min.js"></script> 
<script src="js/matrix.interface.js"></script> 
<script src="js/matrix.chat.js"></script> 
<script src="js/jquery.validate.js"></script> 
<script src="js/matrix.form_validation.js"></script> 
<script src="js/jquery.wizard.js"></script> 
<script src="js/jquery.uniform.js"></script> 
<script src="js/select2.min.js"></script> 
<script src="js/matrix.popover.js"></script> 
<script src="js/jquery.dataTables.min.js"></script> 
<script src="js/matrix.tables.js"></script>  -->
<!-- 使IE9及以下版本支持placeholder属性 -->
{#<script src="http://cdn.bootcss.com/placeholders/3.0.2/placeholders.min.js"></script>#}
<script src="{% static 'bootstrap3/js/placeholders.min.js' %}"></script>
<script src="{% static 'js/bootstrap3-validation.js' %}"></script>

<!-- 另一个表单验证插件 -->
<!-- <script src="{% static 'js/jquery.validator.js' %}"></script> -->
<!-- <script src="{% static 'js/zh_CN.js' %}"></script> -->

<!-- 弹出框插件 -->
<!-- <script src="{% static 'layer/layer.min.js' %}" type="text/javascript"></script> -->
<script src="{% static 'layer/layer.js' %}" type="text/javascript"></script>
<script src="{% static 'layer/extend/layer.ext.js' %}" type="text/javascript"></script>

<script src="{% static 'js/common.js' %}" type="text/javascript"></script>
<script src="{% static 'js/pop-up-box.js' %}" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //tooltip初始化
        $('[data-toggle="tooltip"]').tooltip();
        //开关按钮初始化
        //     $("[type='checkbox']").bootstrapSwitch();
        //     //读取本地存储里的皮肤设置,并加载对应皮肤
        //     var skinname = sessionStorage.getItem("skinname");
        //     if( skinname && skinname!="default"){
        //       var css_html = '<link href="http://7xix1u.com2.z0.glb.qiniucdn.com/bootswatch/3.3.2/'+ skinname +'/bootstrap.min.css" rel="stylesheet" />';
        //     }
        //     $("title").after(css_html);
        //     //切换皮肤
        //     $("#skins li a").on("click",function(){
        //       var skinname = $(this).attr("class");
        //       sessionStorage.setItem("skinname",skinname);
        //       location.reload()
        //     });

        //1. 简单写法：
        $("form").validation();
        $("button[type='submit']").on('click', function (event) {
            // 2.最后要调用 valid()方法。
            if ($("form").valid(this, "表单有误") == false) {
                //$("#error-text").text("error!"); 1.0.4版本已将提示直接内置掉，简化前端。
                return false;
            }

            //disable掉提交按钮
            //       $(this).attr("disabled",　true);　
            //       $(this).text("提交中...");
            // 解决WebKit内核浏览器提交按钮disable后表单不能提交的问题
            //       $(this).parents("form").submit();
        });


        //     切换左侧菜单焦点
        //     $("[flag=" + $('#flag').text() + "]").addClass("active");
        $("[name=" + $('#flag').text() + "]").addClass("active");
        $("[name=" + $('#flag').text() + "]").parents("li").addClass("open");
        //     $("[name=" + $('#flag').text() + "]").parents("li").addClass("active");

        //  显示隐藏右上角搜索框
        var $search = $("#search");
        if ($search.find("input").attr("name")) {
            $search.show();
        }
    });
    //   // This function is called from the pop-up menus to transfer to
    //   // a different page. Ignore if the value returned is a null string:
    //   function goPage (newURL) {

    //       // if url is empty, skip the menu dividers and reset the menu selection to default
    //       if (newURL != "") {

    //           // if url is "-", it is this page -- reset the menu:
    //           if (newURL == "-" ) {
    //               resetMenu();
    //           }
    //           // else, send page to designated URL
    //           else {
    //             document.location.href = newURL;
    //           }
    //       }
    //   }

    // // resets the menu selection upon entry to this page:
    // function resetMenu() {
    //    document.gomenu.selector.selectedIndex = 2;
    // }

    //设置cookie，要删除cookie只需要传入的exdays为0即可
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    //获取cookie
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }
{#    $.ajaxSetup({#}
{#                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'}#}
{#                });#}
    //从后台实施返回数据
    function create_tab(e){
{#        var data = eval("(" + e.data + ")");#}
{#        alert('11111');#}
{#        alert(e);#}
        var data_msg = e.operation_list;
        var tr_list=$('.websocket_tab').find('thead').nextAll(['tr']).remove();
        for (var i = 0; i < data_msg.length; i++) {
            $('.websocket_tab').prepend("<tr><td>" +
                data_msg[i].play_book_name +
                "<input hidden type='checkbox' value='" + data_msg[i].play_books + "' name='pbid'/>" +
                "<td>" + data_msg[i].create_time + "</td>" +
                "<td>" + data_msg[i].end_time + "</td>" +
                "<td><span>" + data_msg[i].status + "</span></td>" +
                "<td><button type='button' class='btn btn-default btn-sm tp_run' sid='" + data_msg[i].server +
                "'version='" + data_msg[i].version + "'url='{% url 'playbooks:run' %}?pbid=" + data_msg[i].play_books + "'" +
                ">重新执行</button></td></tr>"
            );

        };
        console.log('msg:'+JSON.stringify(e.operation_list));
    }
    var old_data = null;
    function create_websocket() {
{#            console.log('websocket 未链接');#}
        $.get('{% url 'operation:sm_list' %}',{},function(e){
            console.log('获取数据');
            create_tab(e);
            console.log('获取结束');
            if (old_data != JSON.stringify(e)) {
                    old_data = JSON.stringify(e);
                    showIframe({
                        content: $('#web_socket'),
                        type: 1,
                        area: ['600px', '450px'],
                        btn: [],
                        offset: 'rb',

                    });
            }
        });
{#        if (window.s) {#}
{#            window.s.close()#}
{#        }#}
{#            var socket = new WebSocket("ws://" + window.location.host + '/operation/websocket/');#}
{##}
{#            socket.onopen = function () {#}
{#            console.log('WebSocket open');#}
{#            };#}
{#            socket.onmessage = function (e) {#}
{#                console.log('message:' + e.data);#}
{#                create_tab(e);#}
{#            };#}
{#            if (socket.readyState == WebSocket.OPEN) socket.onopen();#}
{#            window.s = socket;#}
{##}
    }

    //create_websocket();
    function time_lazy(){
        setInterval(create_websocket, 10000);
    };

    $(".websocket_tab").on('click','.tp_run',function(){
        var sid=$(this).attr('sid');
        var version=$(this).attr('version');
        var url=$(this).attr('url');
        $.post(url,{'sid':sid,'version':version},function(data){
            if(data==1){
                alert("正在运行剧本");
                time_lazy();
            }else{
                alert('系统错误，无法运行')
            }
        })
    })
</script>
{% block footjs %}{% endblock %}
</body>
</html>
